<template>
  <div class="Videolist">
    <section class="toolTop">
      <el-form :inline="true" class="demo-form-inline">
        <el-row :gutter="18">
          <el-col :span="18">
            <el-form-item class="addBtn">
              <el-button icon="el-icon-plus">下 载 视 频</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <section class="main">
      <section class="main_table">
        <el-table
          ref="multipleTable"
          v-bind:data="videolistData"
          style="width: 100%"
          v-bind:max-height="height"
          v-bind:header-cell-style="{background: '#1f2548',color:'#fff'}"
          v-bind:cell-style="{padding:'10px'}"
          @selection-change="handleSelectionChange"
          fit
        >
          <el-table-column align="center" type="selection" width="55px"></el-table-column>
          <el-table-column align="center" sortable label="图片名" max-width="120">
            <template slot-scope="scope">
              <i class="el-icon-video-camera"></i>
              <span>{{scope.row.pictureName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" sortable prop="size" label="大小" max-width="120"></el-table-column>
          <el-table-column align="center" sortable prop="createDate" label="创建时间" max-width="120"></el-table-column>
        </el-table>
        <section class="toolFoot">
          <el-row :gutter="25">
            <el-col :span="24" class="rightCol">
              <el-pagination
                small
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next ,jumper"
                :total="total"
                :pager-count="5"
              ></el-pagination>
            </el-col>
          </el-row>
        </section>
      </section>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../../api/datamg/subdatamg/videolist.js"></script>

<style lang="scss">
.Videolist {
  width: 100%;
  > section {
    &.toolTop {
      width: 50%;
      display: flex;
      flex-direction: column;
      .el-form {
        .el-form-item__content {
          display: flex;
          margin-top: -60%;
        }
      }
      .el-button {
        background-color: #161836;
        color: #85899c;
        border: 1px solid #85899c;
        height: 30px;
        padding: 7px 20px;
      }
      .el-button:hover,
      .el-button:focus {
        background-color: #161836;
        height: 30px;
        padding: 7px 20px;
        color: #fff;
        border: 1px solid #fff;
      }
    }
    &.main {
      > .main_table {
        > .toolFoot {
          margin-top: 16px;
          .rightCol {
            text-align: right;
            .el-pagination--small {
              white-space: nowrap;
              padding: 2px 5px;
              color: #303133;
              font-weight: 700;
              height: 50px;
              span {
                color: #fff;
                line-height: 30px;
                .el-input {
                  .el-input__inner {
                    height: 30px;
                    line-height: 30px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
